<template>
  <div>
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button
          class="mint-button mint-button--default mint-button--normal"
          style="font-size: 15px;"
          @click="option"
        >
          <span class="mint-button-icon">
            <i class="mintui mintui-back"></i>
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">添加个人业绩</h1>
      <div class="mint-header-button is-right"></div>
    </header>
    <!-- <div style="height:40px"/> -->
    <mt-field v-model="content" label="获奖内容:" placeholder="输入获奖内容" />
    <mt-field label="获奖时间:">
      <span style="color:#888;width:200px;display:inline-block;text-align:right" @click="addtime">{{ grantime }}</span>
    </mt-field>
    <mt-field label="上传附件:">
      <span style="color:#888">{{ filename.name }}</span>
      <uploadpic
        :localfiletype="1"
        :imagefile.sync="filename"
        style="position: absolute;bottom: 0px;opacity: -1.5;"
      />
    </mt-field>

    <div class="datePicker">
      <mt-datetime-picker
        ref="picker"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        @confirm="handleConfirm"
      />
    </div>
    <!-- <mt-datetime-picker
        v-model="grantime"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
    ></mt-datetime-picker>-->
    <div style="text-align: center">
      <mt-button type="primary" style="width:45%;margin-top:20px" @click="addpersonal">确 定</mt-button>
    </div>
  </div>
</template>
<script>
import uploadpic from '~/components/uploadpic.vue'
export default {
  components: {
    uploadpic
  },
  data() {
    return {
      grantime: '请选择获奖时间',
      filename: {
        name: '点我上传'
      },
      content: '',
      ts: this.newStore(),
      htitle: '添加个人业绩'
    }
  },
  methods: {
    addtime() {
      this.$refs.picker.open()
    },
    handleConfirm(data) {
      console.log(data)
      this.grantime = this.formatDate(data)
    },
    formatDate(date) {
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    },
    option() {
      this.$router.go(-1)
    },
    addpersonal() {
      if (this.content == '' || this.content == undefined) {
        this.$messagebox('提示', '请输入获奖内容')
        return
      }
      if (this.grantime == '' || this.grantime == undefined) {
        this.$messagebox('提示', '请输入获奖时间')
        return
      }
      this.$messagebox.confirm('是否确认添加').then(action => {
        const req = {
          handle:
            'D328E4C742B794043F60211ED98E8FE4808793608E16237590BB61AA9EBA850D',
          username: localStorage.getItem('username'),
          content: this.content,
          grantime: this.grantime,
          pid: localStorage.getItem('pid'),
          fielname: this.filename.name,
          fileurl: this.filename.url
        }
        this.spost(this.ts, '/mainservlet', req).then(ts => {
          if ((ts.d.sflag = 'success')) {
            this.$messagebox('提示', '添加成功！').then(action => {
              this.$router.push('/myinfo')
            })
          }
        })
      })
    }
  }
}
</script>
<style scoped>
.mint-field-core {
  text-align: right !important;
}
</style>
